<template>
  <div>
    <div class="inp" id="inp" contenteditable="true" v-html="content" @blur="handlePBlur" @focus="handlePFocus" ></div>
    <!-- 输入框 <input :style="{'height':height}" id="inp" type="text" v-model="content" @focus="handleFocus" @blur="handleBlur"> -->
    <div class="box btn_wrap">
      <h3>Buttons</h3>
      <div class="btns">
        <Button round wave size="small" bgc="#67c23a" />
        <Button round wave size="middle" bgc="#67c23a" />
        <Button round wave size="large" bgc="#67c23a" />
        <Button round press size="small" />
        <Button round press size="middle" />
        <Button round press size="large" />
        <Button round press size="large" hover />
      </div>
    </div>
    <div class="big_box">
      <div class="box">
        <h3>悬停时跟随鼠标光标渐变的效果</h3>
        <MouseFollowBtn />
      </div>
      <div class="box">
        <h3>带边框动画的按钮</h3>
        <BorderAnimationBtn />
      </div>
      <div class="box">
        <h3>摆动/缩放的按钮</h3>
        <div class="btn_animate">
          <SwingAnimationBtn swing/>
          <SwingAnimationBtn magnify />
          <SwingAnimationBtn shrink />
        </div>
      </div>
    </div>
    <div class="big_box">
      <div class="box">
        <h3>打字机效果</h3>
        <TextWriterEffect />
      </div>
      <div class="box">
        <h3>文字截断效果</h3>
        <TextTruncate />
      </div>
    </div>
    <div class="big_box">
      <!-- <div class="box">
        <h3>修改选中文字的样式</h3>
        <p class="custom-text-selection">Select some of this text.</p>
      </div> -->
      <div class="box neno_light">
        <h3>霓虹灯</h3>
        <NemoLight />
      </div>
      <div class="box">
        <h3>悬停时显示图像叠加效果</h3>
        <ImageOverlay />
      </div>
    </div>
    <div class="big_box">
      <div class="box">
        <h3>带有悬浮章节标题的列表</h3>
        <FloatingHeadings />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'smallComs',
  data(){
    return {
      content:'红红火火恍恍惚惚或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或',
      content1:'https://identity.getpostman.com/browser-auth/success?redirect_uri=postman%3A%2F%2Fauth%2Fcallback&code=87521a60c638ff4fb7ea352849fd7bcda4c2f6cacb91814f4cfd6df122ebb461 =https://identity.getpostman.com/browser-auth/success?redirect_uri=postman%3A%2F%2Fauth%2Fcallback&code=87521a60c638ff4fb7ea352849fd7bcda4c2f6cacb91814f4cfd6df122ebb461 ==https://identity.getpostman.com/browser-auth/success?redirect_uri=postman%3A%2F%2Fauth%2Fcallback&code=87521a60c638ff4fb7ea352849fd7bcda4c2f6cacb91814f4cfd6df122ebb461',
      height:'20px'
    }
  },
  methods:{
    handlePBlur(e){
      console.log('handlePBlur');
      // content=$event.target.innerText
      e.target.style.setProperty('height','30px')
    },
    handlePFocus(e){
      console.log('handlePFocus',e);

      let a= (this.content.length * 28) / 400 
      console.log('this.content.length * 7',this.content.length * 7);
      console.log('a',a);
      let h = a * 22 + 'px'
      e.target.style.setProperty('height',h)
    },
    handleFocus(e){
      console.log('focus--e',e);
      let dom = document.getElementById('inp')
      dom.style.setProperty('height','100px')
    },
    handleBlur(e){
      e.target.style.setProperty('height','50px')
    },
    // @click="handleclick"
    // handleclick(e){
    //   console.log('e',e);
    //   let dom = document.querySelector('.inp')
    //   console.log('height',dom.offsetHeight);
    // }
  }
}
</script>

<style lang="less" scoped>
.inp{
  width: 500px;
  height: 20px;
  border: 1px solid #ccc;
}
#inp{
  width: 400px;
  height:28px;
  line-height: 24px;
  text-align: left;
  padding: 0 10px;
  overflow: hidden;
  transition: all 0.2s ease;
  margin: 50px;
}
.big_box {
  width: 100%;
  display: flex;
  .box {
    width: 50%;
  }
}
.box {
  background: rgb(248, 246, 246);
  padding: 20px;
  margin-top: 10px;
  h3 {
    border-bottom: 1px solid #ccc;
    text-align: left;
    padding: 10px;
  }
  .btn_animate {
    display: flex;
    justify-content: flex-start;
    .button_swing{
      margin-right: 5px;
    }
  }
}
.btn_wrap {
  .btns {
    display: flex;
    .btn {
      margin-right: 10px;
    }
  }
}

.custom-text-selection::selection {
  background: deeppink;
  color: white;
}
</style>
